$dropdown: $prefix + 'dropdown';

.#{$dropdown} {
    @apply inline-block;

    &-item {
        @apply cursor-pointer;

        &>* {
            @apply block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white whitespace-nowrap;
        }
    }

    &-menu {
        @apply absolute hidden z-10 bg-white divide-y divide-gray-100 rounded-lg shadow dark:bg-gray-700 dark:divide-gray-600;
        /*TODO*/
        min-width: 11rem;

        &.block {
            display: block;
        }

        &-body {
            @apply py-2 text-sm text-gray-700 dark:text-gray-200;
        }
    }
}